<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>股市行情</title>
  <link rel="stylesheet" href="css/popup.css">
</head>
<body>
  <div class="content">
    <div class="index-container-wrapper">
      <div class="index-container">
        <div class="index-item" id="sh000001">上证指数: --</div>
        <div class="index-item" id="sz399001">深证成指: --</div>
        <div class="index-item" id="sz399006">创业板: --</div>
        <div class="index-item" id="sh000688">科创50: --</div>
        <div class="index-item" id="hkHSI">恒生指数: --</div>
        <div class="index-item" id="usDJI">道琼斯: --</div>
        <div class="index-item" id="usIXIC">纳斯达克: --</div>
      </div>
    </div>
    <div id="stock-list"></div>
  </div>
  
  <div class="toolbar">
    <div class="time-display">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="12" cy="12" r="10"></circle>
        <polyline points="12 6 12 12 16 14"></polyline>
      </svg>
      <span id="current-time">00:00:00</span>
    </div>
    <div style="margin-left: auto; display: flex;">
      <div class="settings-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="3"></circle>
          <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
        </svg>
      </div>
      <div class="import-export-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
          <polyline points="17 8 12 3 7 8"></polyline>
          <line x1="12" y1="3" x2="12" y2="15"></line>
        </svg>
      </div>
      <div class="about-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="16" x2="12" y2="12"></line>
          <line x1="12" y1="8" x2="12.01" y2="8"></line>
        </svg>
      </div>
    </div>
  </div>

  <div id="settings-panel">
    <div class="settings-header">
      <div class="header-content">
        <h3>添加自选股</h3>
        <button id="close-settings">&times;</button>
      </div>
    </div>
    <div class="search-container">
      <input type="text" id="stock-search" placeholder="输入股票代码或名称">
    </div>
    <div id="search-results">
      <!-- 搜索结果将在这里显示 -->
    </div>
  </div>

  <div class="import-export-modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h3>自选股操作</h3>
        <span class="close-modal">&times;</span>
      </div>
      <div class="modal-body">
        <div class="import-section">
          <h4>导入自选股</h4>
          <input type="file" id="import-file" accept=".json">
          <label for="import-file">选择文件</label>
          <button id="import-btn">导入JSON文件</button>
        </div>
        <div class="export-section">
          <h4>导出自选股</h4>
          <button id="export-btn">导出为JSON文件</button>
        </div>
      </div>
    </div>
  </div>

  <div class="about-modal" style="display: none;">
    <div class="modal-content">
      <div class="modal-header">
        <h3>功能介绍</h3>
        <span class="close-modal">&times;</span>
      </div>
      <div class="modal-body markdown-content">
        <!-- README.md 内容将通过 JS 动态插入这里 -->
      </div>
    </div>
  </div>

  <script src="js/popup.min.js"></script>
</body>
</html> 